<template>
  <div class="MyTableTag">
    <div class="tagBox" @click="handleAllTag(tagList)">
      <el-tag v-for="(tag,index) in list" v-if="!(index>4)" :style="{borderColor:tag.color,color:tag.color}"  :key="index" class="myTag">
        {{tag.name}}
      </el-tag>
      <span v-if="(list.length>5)">...</span>
    </div>

  <el-dialog title="查看标签" width="600px" v-dialogDrag  :visible.sync="tagVisible" @close="tagVisible = false">
     <div style="min-height:200px;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;">
         <el-tag v-for="(tag,index) in list"  :style="{borderColor:tag.color,color:tag.color}" :key="index"   class="myTag">
           {{tag.name}}
         </el-tag>
     </div>
   </el-dialog>
  </div>


</template>

<script>
 export default {
   name: "MyTableTag",
   props: {
     tagList: {
       default: null,
     },
   },
   data(){
     return{
       tagVisible:false,
       list:[]
     }
   },
   watch: {
     tagList (val) {
       if(this.tagList){
         if(typeof(this.tagList)=='string'){
            let list = this.tagList.length?(this.tagList.split(',')):[];
            let arr = [];
            for(let i=0;i<list.length;i++){
              arr.push({name:list[i],borderColor:'#000',color:'#000'})
            }
            this.list = arr;
         }else{
            this.list = this.tagList;
         }
       }
     }
   },
   mounted() {
     if(this.tagList){
       if(typeof(this.tagList)=='string'){
          let list = this.tagList.length?(this.tagList.split(',')):[];
          let arr = [];
          for(let i=0;i<list.length;i++){
            arr.push({name:list[i],borderColor:'#000',color:'#000'})
          }
          this.list = arr;
       }else{
          this.list = this.tagList;
       }
     }
   },
   methods:{
     handleAllTag(){
       this.tagVisible = true;
     }
   }
 }
</script>

<style lang="scss" scoped>
    .tagBox{
      cursor: pointer;
    }
    .myTag{
      margin-right:5px;
      color:#fff;
      padding: 4px 8px;
      font-size: 12px;
      line-height: 12px;
      color: #fff;
      border-radius: 2px;
      margin-right: 4px;
      width: fit-content;
      height:auto;
    }
</style>
